import React, { useEffect, useRef, useState } from 'react'
import { createScenes, drawCmd } from '../../tor2d';
import { useDispatch, useSelector } from 'react-redux';
import { modDrawAttr } from '../../store/actions/mod';
import { fetchDraftData } from '../../store/actions/infoApi';
// import { drawType } from './config';
export default function Cad2d() {
  const cadRef = useRef(null);
  const drawMode = useSelector(({ drawMode }) => drawMode)
  const dispatch = useDispatch();
  const [cursorType, setCursorType] = useState();
  useEffect(() => {
    createScenes(cadRef.current);
    // scenes.setGrid();
  }, [cadRef]);
  function setDrawData(data) {
    // console.log('重新渲染：', data);
    dispatch(modDrawAttr(data))
  }
  useEffect(() => {
    console.log('drawMode: ', drawMode);
    setCursorType('crosshair');
    const entity = drawCmd(drawMode);
    entity.subscribe(setDrawData);
  }, [drawMode]);
  useEffect(() => {
    dispatch(fetchDraftData()).then(res => {
      console.log(res);
    })
  }, [])
  return (
    <canvas id='rcad' ref={cadRef} width='880' height='550'
      style={{ cursor: cursorType }}
    />
  )
}
